<script setup lang="ts">
import { useFuncStore } from "../../store";
import { storeToRefs } from "pinia";
import StFuncUpdate from "./FuncUpdate.vue";
import StFuncAdd from "./FuncAdd.vue";
import { ref } from "vue";
import { ElMessage} from "element-plus";
import { Edit,Delete, Plus} from "@element-plus/icons-vue";

const funcStore = useFuncStore();
const { funcTree } = storeToRefs(funcStore);//从仓库里拿数据来用
const{updateFunc, addFunc}=funcStore//从仓库里拿方法来用
const updateRef = ref<InstanceType<typeof StFuncUpdate> | null>(null);
const addRef = ref<InstanceType<typeof StFuncAdd> | null>(null);
const updateHandler = async (func:any) => {
  await updateFunc(func);
  updateRef.value?.end();
  ElMessage({ message: "功能修改成功...", type: "success" });
};
const addHandler = async (func:any) => {
  await addFunc(func);
  addRef.value?.end();
  ElMessage({ message: `功能"${func.func_name}"添加成功...`, type: "success" });
};
</script>
<template>
  <el-tree
    :data="funcTree"
    class="custom-tree"
    default-expand-all
    :expand-on-click-node="false">
    <template #default="{ data }">
      <div class="custom-tree-node">
        <span>{{ data.func_name }}</span>
        <span>
          <el-button v-if="data.func_key === ''" @save="addHandler" @click="addRef?.begin(data)" :icon="Plus" type="success"
            >新增</el-button
          >
          <template v-if="![0, 1, 2].includes(data.func_id)">
            <el-button @click="updateRef?.begin(data)" @save="updateHandler" :icon="Edit" type="danger"
              >修改</el-button
            >
            <el-button :disabled="data.children" :icon="Delete" type="info">删除</el-button>
          </template>
        </span>
      </div>
    </template>
  </el-tree>
  <st-func-update ref="updateRef" @save="updateHandler"></st-func-update>
  <st-func-add ref="addRef" @save="addHandler"></st-func-add>
</template>

<style scoped>
.el-tree{
  background-color: #ADD8E6;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}
</style>
